<template>
  <div class="editor-view">
    <h2>视频编辑</h2>
    <div class="card">
      <div class="tabs">
        <button
          v-for="tab in tabs"
          :key="tab.id"
          :class="['tab', { active: activeTab === tab.id }]"
          @click="activeTab = tab.id"
        >
          {{ tab.label }}
        </button>
      </div>

      <div class="upload-area" @click="selectFile">
        <p v-if="!inputFile">点击选择视频文件</p>
        <p v-else>{{ inputFile }}</p>
      </div>

      <div v-if="inputFile && activeTab === 'split'" class="options">
        <h3>视频分割</h3>
        <div class="option-group">
          <label>开始时间 (秒)</label>
          <input v-model.number="splitStart" type="number" min="0" />
        </div>
        <div class="option-group">
          <label>持续时长 (秒)</label>
          <input v-model.number="splitDuration" type="number" min="1" />
        </div>
        <button @click="split" :disabled="processing" class="btn-primary">
          {{ processing ? '处理中...' : '分割视频' }}
        </button>
      </div>

      <div v-if="inputFile && activeTab === 'concat'" class="options">
        <h3>视频拼接</h3>
        <p class="tip">请选择多个视频文件进行拼接</p>
        <button @click="selectMultipleFiles" class="btn-secondary">选择多个文件</button>
        <div v-if="concatFiles.length > 0" class="file-list">
          <p v-for="(file, index) in concatFiles" :key="index">{{ file }}</p>
        </div>
        <button v-if="concatFiles.length > 1" @click="concat" :disabled="processing" class="btn-primary">
          {{ processing ? '拼接中...' : '开始拼接' }}
        </button>
      </div>

      <div v-if="inputFile && activeTab === 'rotate'" class="options">
        <h3>视频旋转</h3>
        <div class="option-group">
          <label>旋转角度</label>
          <select v-model.number="rotateAngle">
            <option :value="90">顺时针 90°</option>
            <option :value="180">180°</option>
            <option :value="270">逆时针 90°</option>
          </select>
        </div>
        <button @click="rotate" :disabled="processing" class="btn-primary">
          {{ processing ? '处理中...' : '旋转视频' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tabs = [
  { id: 'split', label: '分割' },
  { id: 'concat', label: '拼接' },
  { id: 'rotate', label: '旋转' },
];

const activeTab = ref('split');
const inputFile = ref('');
const processing = ref(false);

const splitStart = ref(0);
const splitDuration = ref(10);

const concatFiles = ref<string[]>([]);

const rotateAngle = ref(90);

const selectFile = async () => {
  const result = await window.electronAPI.dialog.openFile({
    filters: [{ name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv'] }],
  });

  if (!result.canceled && result.filePaths[0]) {
    inputFile.value = result.filePaths[0];
  }
};

const selectMultipleFiles = async () => {
  const result = await window.electronAPI.dialog.openFile({
    properties: ['openFile', 'multiSelections'],
    filters: [{ name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv'] }],
  });

  if (!result.canceled && result.filePaths.length > 0) {
    concatFiles.value = result.filePaths;
  }
};

const split = async () => {
  const result = await window.electronAPI.dialog.saveFile({
    defaultPath: 'split.mp4',
    filters: [{ name: 'Video', extensions: ['mp4'] }],
  });

  if (result.canceled || !result.filePath) return;

  processing.value = true;

  try {
    await window.electronAPI.video.split({
      input: inputFile.value,
      output: result.filePath,
      startTime: splitStart.value,
      duration: splitDuration.value,
    });
    alert('分割完成！');
  } catch (error) {
    alert('分割失败：' + error);
  } finally {
    processing.value = false;
  }
};

const concat = async () => {
  const result = await window.electronAPI.dialog.saveFile({
    defaultPath: 'concat.mp4',
    filters: [{ name: 'Video', extensions: ['mp4'] }],
  });

  if (result.canceled || !result.filePath) return;

  processing.value = true;

  try {
    await window.electronAPI.video.concat({
      inputs: concatFiles.value,
      output: result.filePath,
      reEncode: true,
    });
    alert('拼接完成！');
  } catch (error) {
    alert('拼接失败：' + error);
  } finally {
    processing.value = false;
  }
};

const rotate = async () => {
  const result = await window.electronAPI.dialog.saveFile({
    defaultPath: 'rotated.mp4',
    filters: [{ name: 'Video', extensions: ['mp4'] }],
  });

  if (result.canceled || !result.filePath) return;

  processing.value = true;

  try {
    await window.electronAPI.video.rotate({
      input: inputFile.value,
      output: result.filePath,
      angle: rotateAngle.value,
    });
    alert('旋转完成！');
  } catch (error) {
    alert('旋转失败：' + error);
  } finally {
    processing.value = false;
  }
};
</script>

<style scoped>
@import '../styles/ConvertView.scss';

h3 {
  margin-bottom: 16px;
  font-size: 16px;
  color: #2c3e50;
}

.file-list {
  margin: 12px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.file-list p {
  margin: 4px 0;
  font-size: 13px;
  color: #555;
}

input[type='number'] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}
</style>
